<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="bar" style="height: 400px"></div>
	<script src="echarts/echarts.js"></script>
	<script>
		var lineEcharts=echarts.init(document.querySelector('#bar'))
	

        var option={
            title:{
                text:'特性示例：渐变色 阴影 点击缩放',
                subtext:'Feature Sample: Gradient Color, Shadow, Click Zoom'//副标题
            },
            legend:{
                type:'plain', //普通图例  scroll：可滚动翻页的图例
                show:true,
                z:5,
                left:30,
                top:20,
                right:50,
                bottom:35,
                width:40,
                height:'auto',
                orient:'vertical',  //图例列表的布局朝向 默认 horizontal
                align:'left',
                padding:10,
                itemGap:15,// 图例每项之间的间隔
                itemWidth:40, //图例标记的图形宽度  default:25
                itemHeight:20,  //图例标记的图形的高度  default：14
                formatter: function(name){
                    return "111"
                }
            },
            xAxis:{
                show:true,
                gridIndex:0,
                position:'top',
                offset:0,
                type:'category', // value 连续数据， time 连续的时序数据  log 对数
                name:'x轴名称',
                nameLocation:'start', //坐标轴名称显示位置 middle /center /end
                nameTextStyle:{//坐标轴名称的文字样式
                    color:'red',
                    fontStyle:'italic',
                    fontWeight:'bold',
                    fontFamily:'sans-serif',
                    fontSize:14;
                } 
            }

        }

        lineEcharts.setOption(option)
    </script>
</body>
</html>